<template>
    <div ref="fullscreen" class="fullscreen">
        <slot></slot>
    </div>
</template>

<script>
import {getStyles} from '@/utils/utils';
export default {
    name: 'fullscreen',
    props: {
        defaultFullScreen: {
            type: Boolean,
            default: false
        },
        fullScreenSelector: {
            type: String,
            default: ''
        },
        // true: 监听浏览器resize事件回调，计算当前窗口大小，第二个参数是当前全屏容器  false: 默认值
        isListenResize: {
            type: Boolean,
            default: false
        },
        // isListenResize === true时 有效
        listenResize: {
            type: Function,
            default: () => {}
        },
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            timerid: null,
            // isFullScreen: false
            container: null
        };
    },
    computed: {
        isFullScreen: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val || false);
            }
        }
    },
    watch: {
        value(newVal, oldVal) {
            if (this.container) {
                // 全屏状态进行监听 是否全屏，退出全屏 移除监听
                if (newVal) {
                    this.handleRemoveListener(this.container);
                    this.handleListener(this.container);
                    this.requestFullScreen(this.container);
                } else {
                    this.exitFullscreen();
                    this.handleRemoveListener(this.container);
                }
            }
        },
        fullScreenSelector(selector) {
            this.container = !selector ? this.$refs['fullscreen'] : document.querySelector(selector);
        }
    },
    mounted() {
        // [HTML5全屏浏览器兼容方案](https://www.cnblogs.com/joyco773/p/9792170.html)
        const selector = this.fullScreenSelector;
        this.container = !selector ? this.$refs['fullscreen'] : document.querySelector(selector);
    },
    methods: {
        // 进入全屏
        requestFullScreen(container) {
            if (container.requestFullscreen) {
                container.requestFullscreen();
            } else if (container.mozRequestFullScreen) {
                container.mozRequestFullScreen();
            } else if (container.webkitRequestFullScreen) {
                container.webkitRequestFullScreen();
            }
        },
        // 退出全屏
        exitFullscreen() {
            // https://github.com/jpilfold/ngx-image-viewer/issues/23
            if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        },
        // 计算容器样式
        handleCalcContainerStyle() {
            const {fullScreenSelector, listenResize} = this;
            const container = !fullScreenSelector
                ? this.$refs['fullscreen'] // eslint-disable-line
                : document.querySelector(fullScreenSelector); // eslint-disable-line
            if (!container) {
                throw new Error(`${fullScreenSelector} 不存在`);
            }
            if (typeof listenResize !== 'function') {
                throw new Error('listenResize 不是函数');
            } else {
                const {width, height} = getStyles(container);
                const styles = {width: width.replace('px', '') - 0, height: height.replace('px', '') - 0};
                listenResize(styles);
            }
        },
        handleSetFullscreen(value) {
            this.isFullScreen = !!value;
        },
        // eslint-disable-next-line
        handleSetFullscreenError(error) {
            this.isFullScreen = false;
        },
        handlefullscreenElement() {
            this.handleSetFullscreen(document.fullscreenElement);
        },
        handlemozFullscreenElement() {
            this.handleSetFullscreen(document.mozFullscreenElement);
        },
        handlewebkitFullscreenElement() {
            this.handleSetFullscreen(document.webkitFullscreenElement);
        },
        handleMSFullscreenElement() {
            this.handleSetFullscreen(document.MSFullscreenElement);
        },
        handlefullscreenerror(error) {
            this.handleSetFullscreenError(error);
        },
        handlemozfullscreenerror(error) {
            this.handleSetFullscreenError(error);
        },
        handlewebkitfullscreenerror(error) {
            this.handleSetFullscreenError(error);
        },
        handleMSFullscreenError(error) {
            this.handleSetFullscreenError(error);
        },

        handleListener(container) {
            container.addEventListener('fullscreenchange', this.handlefullscreenElement);
            container.addEventListener('mozfullscreenchange', this.handlemozFullscreenElement);
            container.addEventListener('webkitfullscreenchange', this.handlewebkitFullscreenElement);
            container.addEventListener('MSFullscreenChange', this.handleMSFullscreenElement);
            container.addEventListener('fullscreenerror', this.handlefullscreenerror);
            container.addEventListener('mozfullscreenerror', this.handlemozfullscreenerror);
            container.addEventListener('webkitfullscreenerror', this.handlewebkitfullscreenerror);
            container.addEventListener('MSFullscreenError', this.handleMSFullscreenError);
        },
        handleRemoveListener(container) {
            container.removeEventListener('fullscreenchange', this.handlefullscreenElement);
            container.removeEventListener('mozfullscreenchange', this.handlemozFullscreenElement);
            container.removeEventListener('webkitfullscreenchange', this.handlewebkitFullscreenElement);
            container.removeEventListener('MSFullscreenChange', this.handleMSFullscreenElement);
            container.removeEventListener('fullscreenerror', this.handlefullscreenerror);
            container.removeEventListener('mozfullscreenerror', this.handlemozfullscreenerror);
            container.removeEventListener('webkitfullscreenerror', this.handlewebkitfullscreenerror);
            container.removeEventListener('MSFullscreenError', this.handleMSFullscreenError);
        }
    }
};
</script>
<style lang="scss" scoped>
.fullscreen {
    width: inherit;
    height: inherit;
    background-color: #fff;
}
</style>
